<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>夕阳红老汉信息有限公司</title>
    <link rel="shortcut icon" href="images/xi.ico"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/iconfont.css"/>
    <link rel="stylesheet" href="css/chooseModel.css"/>
    <style>
        * {
            margin: 0; padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #container {
            overflow: hidden;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
        }

        #background_video {
            position: absolute;

            top: 50%; left: 50%;
            transform: translate(-50%, -50%);

            object-fit: cover;
            height: 100%; width: 100%;
        }

        #video_cover {
            position: absolute;

            width: 100%; height: 100%;

            background: url('images/video_cover.jpeg') no-repeat;
            background-size: cover;
            background-position: center;
        }

        #video_controls {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }

        #play img {
            width: 100px;
        }
        #pause img {
            width: 90px;
        }
        #pause {
            display: none;
        }

        @media (min-width: 768px) {
            #video_controls {
                display: none;
            }
        }
        /* Demo page specific styles */
        body {
            text-align: center;
            font-family: 'proxima-nova', Helvetica;
        }
        #container {
            height: 100%;
        }
        #overlay {
            position: absolute;
            top: 0; right: 0; left: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
        }
        #main_content {
            z-index: 2;
            position: relative;
            display: inline-block;
            /* Vertical center */
            top: 50%;
            transform: translateY(-50%);
        }
        #main_content h1 {
            text-transform: uppercase;
            font-weight: 600;
            font-family: 'proxima-nova-condensed', Helvetica;
            color: #fff;
            font-size: 35px;
        }
        #main_content .sub_head {
            color: rgba(255,255,255,0.5);
            font-size: 18px;
        }
        #main_content .info {
            color: rgba(255,255,255,0.5);
            font-size: 12px;
            margin-top: 10px;
        }
        #links {
            margin-top: 50px;
        }
        #links a {
            border: 2px solid rgba(255,255,255,0.20);
            border-radius: 61px;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 25px;
            display: inline-block;
            margin-right: 15px;
        }
        #footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        #footer a {
            color: rgba(255,255,255,0.5);
            text-decoration: none;
            margin: 10px;
            font-size: 12px;
        }
        #footer a:first-child {
            float: left;
        }
        #footer a:last-child {
            float: right;
        }
    </style>
</head>
<body>
<div class="title-wrap">
    <div class="logo"></div>
    
    <div class="self">欢迎
        <div class="self-detail">
            <ul>
                <li id="self-center"><a href="/self"><i class="iconfont icon-account"></i>个人中心</a></li>
                <li id="loginout"><i class="iconfont icon-qiehuanzuhu"></i>注销</li>
            </ul>
        </div>
    </div>
    
    <div class="returnHome"><a href="/">返回</a></div>
    <div class="login"><a href="/login">填写简历</a></div>
 
    
</div>
<div id="container">
    <video id="background_video" loop muted></video>
    <div id="video_cover"></div>
    <div id="overlay"></div>
    <div id="video_controls">
        <span id="play">
            <img src="images/play.png">
        </span>
        <span id="pause">
            <img src="images/pause.png">
      </span>
    </div>
    <section id="main_content">
        <div id="head">
            <h1>企业招聘系统</h1>
            <p class="sub_head">多个部门职业供你选择</p>
            <form action="ZhiweiServlet" method="post">
            <div class="input-group" style="width: 450px;height:45px;margin: 0 auto;">
                <input type="text" class="form-control" name="keyword" placeholder="请输入搜索关键字" style="height: 100%;">
                <input type="hidden"  name="op" value="mohu">
                <input type="submit" class="form-control" id="login-btn2"value="查找">
                </form>
            </div><!-- /input-group -->
        </div>
    </section>
</div>
<div id="container2">
    <div class="input-group movegrop">
        
        
    </div><!-- /input-group -->
    <div class="grid">
        <div class="grid-item" data-toggle="modal" data-target="#myModal" id="1">
            <p>运营部</p>
        </div>
        <div class="grid-item" data-toggle="modal" data-target="#myModal" id="2">
            <p>运维部</p>
        </div>
        <div class="grid-item" data-toggle="modal" data-target="#myModal" id="3">
            <p>技术部</p>
        </div>
        <div class="grid-item" data-toggle="modal" data-target="#myModal" id="4">
            <p>管理部</p>
        </div>
    </div>

    <footer>
        <div style="text-align:center">
             <a>版权声明</a>©2020 夕阳红老汉信息有限公司 版权所有</a><br>
        </div>
    </footer>
</div>
<div class="side-bar">
    <ul>
        <li><a href="#container" class="scroll"></a></li>
        <li><a href="#container2" class="scroll"></a></li>
    </ul>
</div>
<!--The StartLine of the modal-->

<!--The EndLine of the modal-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bideo.js"></script>
<script src="js/main.js"></script>
<script src="js/chooseModel.js"></script>
<script src="js/dynamics.js"></script>

</body>
</html>